<template>
	<view class="base">
		<view class="content0 content" v-show="nowpage == 0">

		</view>
		<view class="content content1" v-show="nowpage == 1" ref="content" :style="{height:height}">
			<view class="mainact" :style="{height:height}">
				<image id="img1" @load='load' src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/index.png"
					mode="widthFix" ref="bg" class="mainbg"></image>
			</view>
			<view class="slidewrap">
				<image src="../../static/img/slider.png" mode="widthFix" class="slider"></image>
				<image src="../../static/img/btn.png" ref="drag" mode="heightFix" class="btn" @touchstart="touchs"
					@touchmove="touchmo" @touchend="touchen" v-show="showbtn"></image>
				<input type="text" placeholder="输入名字..." style="display: block;" confirm-type="确定" v-model="name"
					v-show="showinput" />
				<view class="btnss" @click="confirmName" v-show="showinput"
					style="width:100%;position: absolute;left: 50%;transform: translateX(-50%);top: 120%;display: flex;justify-content: center;">
					<image style="width: 60%;" src="../../static/img/sure.png" mode="widthFix"></image>
				</view>
			</view>
			<image class="stopmusic" id="stop" @click="stopmusic"
				src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/1/icon-muisc.png">
			</image>
			<image v-for="(item,index) in bglist" :key='index' :src="item" style="display: none;" mode=""></image>
			<image v-for="(item,index) in bgilist" :key='index' :src="item" style="display: none;" mode=""></image>
			<image v-for="(item,index) in choselist" :key='index' :src="item" style="display: none;" mode=""></image>
		</view>
		<view class="content content2" v-show="nowpage == 2" :style="styleobj" id="content">
			<view class="topbtn">
				<image src="../../static/img/quebtn.png" class="quebtn" mode="widthFix"></image>
				<view class="no">
					<text>0{{quesnum}}</text>/08
				</view>
			</view>
			<view class="mainact" :style="{height:height}">
				<image :src='nowbg' style="opacity: 0;" mode="widthFix" class="nowbg" ref="bg"></image>
			</view>
			<view class="question" v-html="question">

			</view>
			<view class="queslist">
				<image v-for="item in nowlist" :src=item.src @tap='choseAsw(item.a)' :key='item.a' mode="widthFix">
				</image>
			</view>
			<image class="stopmusic" @click="stopmusic" id="stop"
				src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/1/icon-muisc.png">
			</image>
			<image v-for="(item,index) in bglist" :key='index' :src="item" style="display: none;" mode=""></image>
			<image v-for="(item,index) in bgilist" :key='index' :src="item" style="display: none;" mode=""></image>
		</view>
		<view class="content content3" v-show="nowpage == 3" id="content3">
			<view class="mainact" :style="{height:height}">
				<view class="name">
					<view class="name2">{{name}}</view>躺平姿势是
				</view>
				<image :src=url mode="widthFix" ref="realbgs" style="opacity: 0;"  id="realbg"></image>
			</view>
			<view class="btns" id="btnx">
				<image src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/share.png" class="sharebtn"
					@click="share" mode="widthFix"></image>
				<image src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/save.png" mode="widthFix"></image>
			</view>
			<image :src=urls mode="widthFix" class="savabg"></image>
			<image class="stopmusic" @click="stopmusic" id="stop"
				src="https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/1/icon-muisc.png">
			</image>
		</view>
		<canvas canvas-id="canvas" ref="canvas" id="canvas" style="width: 100%;height: 100%;" />
		<canvas canvas-id="qrcode" id="qrcode" style="width: 80px; height: 80px" />

	</view>
</template>


<script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280043856&web_id=1280043856"></script>
<script>
	import DrawPoster from '@/js_sdk/u-draw-poster'
	import {
		drawQrCode
	} from "@/js_sdk/u-draw-poster";
	DrawPoster.useCtx(drawQrCode);
	import {
		imgsPreloader
	} from '../../tools/imgPreloader.js';
	import imgPreloaderList from '../../tools/imgPreloaderList.js';
	import wx from '../../weixin-js-sdk'
	import music from '../../tools/music.js'
	import {
		getshareinfo
	} from '../../tools/api.js'
	export default {
		data() {
			return {
				name: '',
				showinput: false,
				showbtn: true,
				flags: false,
				position: {
					x: 0,
					y: 0
				},
				nx: '',
				ny: '',
				dx: '',
				dy: '',
				xPum: '',
				yPum: '',
				height: '',
				musicshow: false,
				nowpage: 0,
				styleobj: {
					height: '',
				},
				questionlist: {
					a: '你现在的生活状态是...',
					b: '目前你最强烈的感受是... ',
					c: '“生命在于运动”对于这句话<br/>你的看法是...',
					d: '如果从今日起开始要求你运动<br/>你的内心是.....',
					e: '你现在日常主要的运动是.....',
					f: '对于运动你做过最大的努力是',
					g: '作为运动达人or躺平达人<br/>你运动是为了.....',
					h: '请挑选一类你比较喜欢的动作 '
				},
				question: '你现在的生活状态是...',
				bgi: '../../static/img/01/bga.png',
				nowQuesNum: 1,
				quesnum: 1,
				nowlist: [],
				answlist: [],
				nowbg: '/static/img/01/bg.png',
				bglist: {
					a: 'http://h5.sino-sources.com/h5/2/img/01/bg.png',
					b: 'http://h5.sino-sources.com/h5/2/img/02/bg.png',
					c: 'http://h5.sino-sources.com/h5/2/img/03/bg.png',
					d: 'http://h5.sino-sources.com/h5/2/img/04/bg.png',
					e: 'http://h5.sino-sources.com/h5/2/img/05/bg.png',
					f: 'http://h5.sino-sources.com/h5/2/img/06/bg.png',
					g: 'http://h5.sino-sources.com/h5/2/img/07/bg.png',
					h: 'http://h5.sino-sources.com/h5/2/img/08/bg.png'
				},
				choselist: [
					'http://h5.sino-sources.com/h5/2/img/01/A.png',
					'http://h5.sino-sources.com/h5/2/img/02/A.png',
					'http://h5.sino-sources.com/h5/2/img/03/A.png',
					'http://h5.sino-sources.com/h5/2/img/04/A.png',
					'http://h5.sino-sources.com/h5/2/img/05/A.png',
					'http://h5.sino-sources.com/h5/2/img/06/A.png',
					'http://h5.sino-sources.com/h5/2/img/07/A.png',
					'http://h5.sino-sources.com/h5/2/img/08/A.png',
					'http://h5.sino-sources.com/h5/2/img/01/B.png',
					'http://h5.sino-sources.com/h5/2/img/02/B.png',
					'http://h5.sino-sources.com/h5/2/img/03/B.png',
					'http://h5.sino-sources.com/h5/2/img/04/B.png',
					'http://h5.sino-sources.com/h5/2/img/05/B.png',
					'http://h5.sino-sources.com/h5/2/img/06/B.png',
					'http://h5.sino-sources.com/h5/2/img/07/B.png',
					'http://h5.sino-sources.com/h5/2/img/08/B.png',
					'http://h5.sino-sources.com/h5/2/img/01/C.png',
					'http://h5.sino-sources.com/h5/2/img/02/C.png',
					'http://h5.sino-sources.com/h5/2/img/03/C.png',
					'http://h5.sino-sources.com/h5/2/img/04/C.png',
					'http://h5.sino-sources.com/h5/2/img/05/C.png',
					'http://h5.sino-sources.com/h5/2/img/06/C.png',
					'http://h5.sino-sources.com/h5/2/img/07/C.png',
					'http://h5.sino-sources.com/h5/2/img/08/C.png',
					'http://h5.sino-sources.com/h5/2/img/01/D.png',
					'http://h5.sino-sources.com/h5/2/img/02/D.png',
					'http://h5.sino-sources.com/h5/2/img/03/D.png',
					'http://h5.sino-sources.com/h5/2/img/04/D.png',
					'http://h5.sino-sources.com/h5/2/img/05/D.png',
					'http://h5.sino-sources.com/h5/2/img/06/D.png',
					'http://h5.sino-sources.com/h5/2/img/07/D.png',
					'http://h5.sino-sources.com/h5/2/img/08/D.png',
				],
				bgilist: {
					a: 'http://h5.sino-sources.com/h5/2/img/01/bga.png',
					b: 'http://h5.sino-sources.com/h5/2/img/02/bgb.png',
					c: 'http://h5.sino-sources.com/h5/2/img/03/bgc.png',
					d: 'http://h5.sino-sources.com/h5/2/img/04/bgd.png',
					e: 'http://h5.sino-sources.com/h5/2/img/05/bge.png',
					f: 'http://h5.sino-sources.com/h5/2/img/06/bgf.png',
					g: 'http://h5.sino-sources.com/h5/2/img/07/bgg.png',
					h: 'http://h5.sino-sources.com/h5/2/img/08/bgh.png'
				},
				queslist: {
					a: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/01/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/01/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/01/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/01/D.png'
					}],
					b: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/02/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/02/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/02/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/02/D.png'
					}],
					c: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/03/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/03/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/03/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/03/D.png'
					}],
					d: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/04/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/04/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/04/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/04/D.png'
					}],
					e: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/05/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/05/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/05/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/05/D.png'
					}],
					f: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/06/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/06/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/06/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/06/D.png'
					}],
					g: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/07/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/07/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/07/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/07/D.png'
					}],
					h: [{
						a: 'A',
						src: 'http://h5.sino-sources.com/h5/2/img/08/A.png'
					}, {
						a: 'B',
						src: 'http://h5.sino-sources.com/h5/2/img/08/B.png'
					}, {
						a: 'C',
						src: 'http://h5.sino-sources.com/h5/2/img/08/C.png'
					}, {
						a: 'D',
						src: 'http://h5.sino-sources.com/h5/2/img/08/D.png'
					}]
				},
				url: 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/a.png',
				urls: 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/a1.png', // 要保存的海报图片地址
				coverurl: '',
				grade: 'a',
				codeurl: '',
				canvashow: true,
			}
		},
		onLoad() {
			this.musicshow = uni.getStorageSync('musicplay')
			uni.showLoading({
				title:'加载中',
				mask:true
			})
		},
		async mounted() {
			document.getElementById('canvas').style.height = (document.body.clientWidth * 1920) / 1080 + 'px'
			this.styleobj.height = (document.body.clientWidth * 1920) / 1080 + 'px'
			console.log(document.body.clientWidth)
			
			document.getElementById('content3').style.backgroundImage =
				'url(https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/bg' +
				this.grade + '.png'
			this.height = (document.body.clientWidth * 1920) / 1080 + 'px'
			var url = location.href.split('#')[0]
			const res = await getshareinfo(url)
			const appId = 'wx81cca98415403b17'
			wx.config({
				debug: false,
				appId: appId,
				timestamp: res.timestamp,
				nonceStr: res.nonceStr,
				signature: res.signature,
				jsApiList: [
					// 需要使用的JS接口列表,分享默认这几个，如果有其他的功能比如图片上传之类的，需要添加对应api进来
					'checkJsApi',
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					'onMenuShareQQ',
					'onMenuShareWeibo',
					'onMenuShareQZone',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
					'updateAppMessageShareData',
					'updateTimelineShareData'
				]
			})
			const shareconfig = {
				share: {
					imgUrl: 'https://sino-sources.com/test2/static/front.png',
					desc: `有一种哲学叫做“躺平学”,有一种青年自称“ 躺平青年”,快来围观你的躺平姿势!`, // 摘要,如果分享到朋友圈的话，不显示摘要。
					title: '扶起躺平的你 ', // 分享卡片标题
					link: url, // 分享出去后的链接，这里可以将链接设置为另一个页面。
					success: function(e) {
						// 分享成功后的回调函数
					},
					cancel: function(e) {
						// 用户取消分享后执行的回调函数
					}
				}
			}
			wx.ready(function() {
				wx.onMenuShareAppMessage(shareconfig.share) // 分享给好友
				wx.onMenuShareTimeline(shareconfig.share) // 分享到朋友圈
				wx.onMenuShareQQ(shareconfig.share) // 分享给手机QQ
			})
		},
		created() {
			// uni.showLoading({
			// 	title: '加载中',
			// 	mask: true
			// })
			// this.$nextTick(function() {
			// 	setTimeout(() => {
			// 		uni.hideLoading()
			// 	}, 1500)
			// })
			const that = this
			console.log('created')
			this.nowlist = this.queslist.a
			console.log(this.nowlist, this.queslist)
			this.nowbg = this.bglist.a
		},
		methods: {
			load() {
				this.nowpage = 1
				uni.hideLoading()
			},
			imgLoad(img, callback) {
				var timer = setInterval(function() {
					if (img.complete) {
						callback(img)
						clearInterval(timer)
					}
				}, 50)
			},
			async drawpaper() {
				const that = this
				// console.log(this.url, this.urls, this.coverurl)
				// 二维码绘制
				// 创建绘制工具
				const dp1 = await DrawPoster.build("qrcode");
				const w1 = (dp1.canvas.width = 80);
				const h1 = (dp1.canvas.height = 80);
				// 创建一个绘制任务
				dp1.draw(async (ctx) => {
					ctx.fillStyle = "#fff";
					ctx.fillRect(0, 0, w1, h1);
					// 绘制二维码
					ctx.drawQrCode({
						x: 0,
						y: 0,
						text: location.href.split('#')[0],
						size: 80,
					});
				});
				this.codeurl = await dp1.createImagePath();
				// 海报的绘制
				// 传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制
				const dp = await DrawPoster.build({
					selector: 'canvas',
					loading: true,
					debugging: true,
				});
				console.log(document.getElementById('canvas').offsetWidth)
				const w = (dp.canvas.width = document.getElementById('canvas').offsetWidth);
				const h = (dp.canvas.height = Math.ceil((document.getElementById('canvas').offsetWidth *
					1920) / 1080));
				console.log(w, h)
				// 绘制基本背景
				dp.draw((ctx) => {
					ctx.fillStyle = '#000000';
					ctx.fillRect(0, 0, w, h);
					console.log(w, h)
				});
				// 绘制图片内容
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(that.coverurl, 0, 0, w, h),
					]);
				});
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(that.codeurl, 0.77 * w, 0.78 * h, w1, h1),
					]);
				});
				// 绘制中间文字内容
				dp.draw((ctx) => {
					ctx.fillStyle = '#ffffff';
					ctx.font = 'bold 12px HappyZcool';
					ctx.fillText(`扫码围观躺平姿势`, 0.74 * w, 0.95 * h);
				});
				// 绘制中间文字内容
				dp.draw((ctx) => {
					ctx.fillStyle = '#ff5500';
					ctx.font = 'bold 18px HappyZcool';
					ctx.fillText(`${that.name}`, 10, 25);
				});
				
				
				
				dp.draw((ctx) => {
					const fontWidth= ctx.measureText(`${that.name}`).width;//获取文本宽度
					ctx.fillStyle = '#7FF5D5';
					ctx.font = 'bold 18px HappyZcool';
					ctx.fillText(`  躺平姿势是`, 11+fontWidth, 25);
				});
				
				var base64Image = await dp.createImagePath();
				var imgData = base64Image.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
				this.urls = imgData
			},
			share() {
				// this.showmask = !this.showmask
				uni.showModal({
					title: '提示',
					content: '点击右上角可分享给好友或朋友圈哦',
					showCancel: false,
					confirmText: '我知道了',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			stopmusic() {
				this.musicshow = !this.musicshow
				console.log(this.musicshow)
				if (this.musicshow) {
					document.getElementById('stop').style.animationPlayState = 'paused'
				} else {
					document.getElementById('stop').style.animationPlayState = 'running'
				}
				uni.setStorageSync('musicplay', this.musicshow)
				music.playBgm({
					mute: this.musicshow
				})
			},
			touchs() {
				console.log(1)
				this.flags = true;
				var touch;
				if (event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				this.position.x = touch.clientX;
				this.position.y = touch.clientY;
				this.dx = document.getElementsByClassName('btn')[0].offsetLeft;
				this.dy = document.getElementsByClassName('btn')[0].offsetTop;
			},
			touchmo() {
				if (this.flags) {
					var touch;
					if (event.touches) {
						touch = event.touches[0];
					} else {
						touch = event;
					}
					this.nx = touch.clientX - this.position.x;
					this.ny = touch.clientY - this.position.y;
					this.xPum = this.dx + this.nx;
					this.yPum = this.dy + this.ny;
					document.getElementsByClassName('btn')[0].style.left = this.xPum + "px";
					console.log()
					console.log(document.getElementsByClassName('btn')[0].offsetLeft)
					if (document.getElementsByClassName('btn')[0].offsetLeft > 0.4 * document.getElementById('canvas')
						.offsetWidth) {
						this.showinput = true
						this.showbtn = false
						return false
					}
					//阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
					document.addEventListener("touchmove", function() {
						event.preventDefault();
					}, false);
				}
			},
			touchen() {
				this.flags = false;
				this.showinput = true
				this.showbtn = false
				console.log(document.getElementsByClassName('btn'))
				// document.getElementsByClassName('btn')[0].style.right = '68%'
				// this.showinput = !this.showinput
			},
			// 输入完名字
			confirmName(e) {
				if (this.name) {
					let name = e.detail.value
					console.log(name)
					uni.setStorageSync('name', this.name)
					// 跳转到题目1
					this.nowpage = 2
				} else {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				}
			},
			async choseAsw(ans) {
				// uni.showLoading({
				// 	title: '加载中'
				// })
				// 组装一个答案对象
				const aobj = {
					answer: ans,
					score: ans == 'A' ? 0 : ans == 'B' ?
						1 : ans == 'C' ?
						2 : 3,
					num: this.nowQuesNum
				}
				// 放到答案数组里
				let list = this.answlist
				list.push(aobj)
				this.answlist = list
				this.nowQuesNum = this.nowQuesNum + 1
				this.quesnum = this.nowQuesNum > 8 ? 8 : this.nowQuesNum
				if (this.nowQuesNum == 1) {
					this.nowlist = this.queslist.a
					this.nowbg = this.bglist.a
					this.bgi = this.bgilist.a
					this.question = this.questionlist.a
				} else if (this.nowQuesNum == 2) {
					this.nowlist = this.queslist.b
					this.nowbg = this.bglist.b
					this.question = this.questionlist.b
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/02/bgb.png)'
				} else if (this.nowQuesNum == 3) {
					this.nowlist = this.queslist.c
					this.nowbg = this.bglist.c
					this.bgi = this.bgilist.c
					this.question = this.questionlist.c
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/03/bgc.png)'
				} else if (this.nowQuesNum == 4) {
					this.nowlist = this.queslist.d
					this.nowbg = this.bglist.d
					this.bgi = this.bgilist.d
					this.question = this.questionlist.d
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/04/bgd.png)'
				} else if (this.nowQuesNum == 5) {
					this.nowlist = this.queslist.e
					this.nowbg = this.bglist.e
					this.bgi = this.bgilist.e
					this.question = this.questionlist.e
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/05/bge.png)'
				} else if (this.nowQuesNum == 6) {
					this.nowlist = this.queslist.f
					this.nowbg = this.bglist.f
					this.bgi = this.bgilist.f
					this.question = this.questionlist.f
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/06/bgf.png)'
				} else if (this.nowQuesNum == 7) {
					this.nowlist = this.queslist.g
					this.nowbg = this.bglist.g
					this.bgi = this.bgilist.g
					this.question = this.questionlist.g
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/07/bgg.png)'
				} else if (this.nowQuesNum == 8) {
					this.nowlist = this.queslist.h
					this.nowbg = this.bglist.h
					this.bgi = this.bgilist.h
					this.question = this.questionlist.h
					document.getElementById('content').style.backgroundImage =
						'url(http://h5.sino-sources.com/h5/2/img/08/bgh.png)'
				} else {
					// 计算成绩并且跳转
					console.log('jisuan')
					let score = 0
					this.answlist.map(item => {
						score = score + item.score
					})
					console.log('fenshu', score)
					let grade = score >= 0 && score <= 3 ? 'a' : score >= 4 && score <= 6 ? 'b' : score >= 7 &&
						score <=
						9 ? 'c' : score >= 10 && score <= 12 ? 'd' : score >= 13 && score <= 15 ? 'e' : score >= 16 &&
						score <= 18 ? 'f' : score >= 19 && score <= 21 ? 'g' : score >= 22 && score <= 24 ? 'e' : 'f'
					console.log('dengji', grade)
					this.grade = grade
					this.url = 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/' + grade + '.png'
					this.urls = 'https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/' + grade + '1.png'
					document.getElementById('content3').style.backgroundImage =
						'url(https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/bg' +
						this.grade + '.png'
					this.coverurl = '../../static/img/' + grade + '1.png'
					await this.drawpaper()
					this.nowpage = 3
				}
				// setTimeout(() => {
				// 	uni.hideLoading()
				// }, 300)
			}
		}
	}
</script>

<style lang='scss'>
	.base {
		width: 100%;
		min-height: 100vh;
	}

	@keyframes rotatelogo {
		0% {
			transform: rotateZZ(0);
		}

		25% {
			transform: rotateZ(90deg);
		}

		50% {
			transform: rotateZ(180deg);
		}

		75% {
			transform: rotateZ(270deg);
		}

		100% {
			transform: rotateZ(360deg);
		}
	}

	@-webkit-keyframes rotatelogo {
		0% {
			transform: rotateZ(0);
		}

		25% {
			transform: rotateZ(90deg);
		}

		50% {
			transform: rotateZ(180deg);
		}

		75% {
			transform: rotateZ(270deg);
		}

		100% {
			transform: rotateZ(360deg);
		}
	}

	.content1 {
		width: 100%;
		min-height: 100vh;
		background-image: url('http://h5.sino-sources.com/h5/2/img/bg.png');
		background-position: 0 center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #4F00FC;
		position: relative;

		.mainact {
			width: 100%;
			position: relative;
			background-color: rgba(0, 0, 0, 0);
		}

		.stopmusic {
			width: 3em;
			height: 3em;
			position: absolute;
			right: 2%;
			top: 2%;
			animation: rotatelogo 3s linear infinite;
		}

		.mainbg {
			width: 100%;
		}

		.slidewrap {
			width: 58%;
			position: absolute;
			bottom: 10%;
			left: 50%;
			transform: translateX(-50%);
			background-color: rgba($color: #000000, $alpha: 0);
			display: flex;
			justify-content: center;

			input {
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
				border-radius: 1900px;
				position: absolute;
				top: 0;
				left: 0;
				font-size: 25.1458rpx;
				font-family: HappyZcool;
				font-weight: bold;
				color: #4F00FC;
				text-align: center;
			}
		}

		.slider {
			width: 100%;
			border-radius: 1000px;
		}

		.btn {
			height: 90%;
			position: absolute !important;
			left: 0;
			top: 50%;
			transform: translateY(-50%) rotateZ(180deg);
			border-radius: 100000px;
		}
	}

	.content2 {
		width: 100%;
		min-height: 100vh;
		background: url('http://h5.sino-sources.com/h5/2/img/01/bga.png') 0 center no-repeat;
		background-repeat: no-repeat;
		background-color: #4F00FC;
		background-size: 100vw 100vh;
		position: relative;
		/* padding-top: 46%; */
		transition: all 0.1s;

		.stopmusic {
			width: 3em;
			height: 3em;
			position: absolute;
			right: 2%;
			top: 10%;
			animation: rotatelogo 3s linear infinite;
		}

		.topbtn {
			width: 100%;
			position: absolute;
			top: 2%;
			z-index: 9;
			padding-left: 2%;
			padding-right: 2%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.no {
				height: 52px;
				font-size: 40px;
				font-family: Impact;
				font-weight: 400;
				color: #B9B9B9;

				text {
					color: #7FF5D5;
				}
			}
		}

		.quebtn {
			width: 70%;
		}
		.nowbg{
			position: absolute !important;
			top: 10%;
			left: 50%;
			transform: translateX(-50%);
		}

		.mainact {
			width: 100%;
			position: relative;
		}

		image {
			width: 100%;
		}

		.question {
			width: 100%;
			font-size: 1.8em;
			font-family: HappyZcool;
			font-weight: normal;
			text-align: center;
			color: rgb(126, 245, 215);
			position: absolute;
			bottom: 32%;
			left: 50%;
			transform: translateX(-50%);
			justify-content: center;
			background: url(../../static/under.png) 0 bottom no-repeat;
			background-size: 100vw 1em;
			padding: 0 0.6em;
		}

		.queslist {
			width: 85%;
			height: 30%;
			position: absolute;
			bottom: 2%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			image {
				width: 100%;
			}

		}
	}


	#canvas {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: -3;
	}

	#qrcode {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 100px;
		left: 0;
		opacity: 0;
		z-index: -3;
	}

	.content3 {
		width: 100%;
		background: url(https://sino-seo.oss-cn-beijing.aliyuncs.com/h5/2/img/bga.png) 0 0 no-repeat;
		background-size: 100vw 100vh;
		background-color: #4F00FC;
		min-height: 102vh;
		padding-top: 5%;
		position: relative;
		display: flex;
		flex-direction: column;

		.mainact {
			width: 100vw;
			position: relative;
		}

		.stopmusic {
			width: 3em;
			height: 3em;
			position: absolute;
			right: 2%;
			top: 10%;
			animation: rotatelogo 3s linear infinite;
			z-index: 999;
		}

		image {
			width: 100%;
		}

		.name {
			position: absolute;
			top: 0%;
			left: 3%;
			font-size: 20px;
			font-family: HappyZcool;
			font-weight: normal;
			color: #7FF5D5;
			z-index: 10000;
		}
		.name2 {
			color: #ff5500;
			z-index: 10000;
		}

		.savabg {
			width: 100%;
			position: absolute !important;
			bottom: 0;
			left: 0;
			opacity: 0;
			z-index: 3;
		}

		#canvas {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}

		#qrcode {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 100px;
			left: 0;
			opacity: 0;
		}

		.btns {
			width: 100%;
			position: absolute;
			bottom: 4%;
			left: 0;
			display: flex;
			justify-content: space-around;

			image {
				width: 40%;
			}

			.sharebtn {
				z-index: 1000;
			}
		}

		.mask {
			width: 100vw;
			height: 100vh;
			background-color: rgba(1, 1, 1, 0.5);
			position: fixed;
			left: 0;
			top: 0;
		}
	}
</style>
